
<template>
    <div class="wave">
  
      <div class="image-container">
        <div class="image-wrapper">
          <img v-for="(item,index) in 2" src="@/assets/picture/bannerWave1.png" alt="Moving Image">
        </div>
      </div>
      <div class="image-container">
        <div class="image-wrapper1">
          <img v-for="(item,index) in 2" src="@/assets/picture/bannerWave2.png" alt="Moving Image" >
        </div>
      </div>
    </div>
    </template>
    <style scoped>
    .wave{
      position: relative;
      width: 100%;
      height: 100%;
      /* background-color: yellowgreen; */
    }
    .image-container {
      position: absolute;
      width: 100%;
      overflow: hidden;
      height: 100%;
    }
    .image-wrapper {
      display: flex;
      animation: slideLeft 16s linear infinite;
      /* background-color: yellowgreen; */
      width: auto;
      margin-top: 20px;
      height: 100%;
      min-width: 100%; /* 确保每张图片至少与容器一样宽 */
    }
    .image-wrapper1 {
      display: flex;
      animation: slideLeft 8s linear infinite;
      /* top: 10px; */
      /* background-color: yellowgreen; */
      width: auto;
      height: 100%;
      min-width: 100%; /* 确保每张图片至少与容器一样宽 */
    }
    img {
      width: auto;
      height: 100%;
      min-width: 100%; /* 确保每张图片至少与容器一样宽 */
    }
    
    @keyframes slideLeft {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-100%);
      }
    }
    </style>